<template>
  <div class="textdd">
    <NavBar title="课程订单" left-arrow @click-left="onClickLeft" />
    <div>
      <Tabs v-model="active" @click="getTab">
        <Tab v-for="(item,index) in title" :key="index" :title="item.title">
          <div v-if="active==0||active==2">
            <div class="all" v-for="(item,index) in list1" :key="index">
              <p class="p1">
                <span>订单编号：{{item.order_number}}</span>
                <span style="color:orange">交易完成</span>
              </p>
              <p class="p2">{{item.title}}</p>
              <p class="p3">时间：{{item.created_at|time}}</p>
              <p class="p4">实付款：{{item.order_price}}</p>
            </div>
          </div>
          <div class></div>
        </Tab>
      </Tabs>
    </div>
  </div>
</template>

<script>
import { Tab, Tabs, NavBar } from "vant";
import { getMyOrder } from "../../https/https";
export default {
  components: {
    Tab,
    Tabs,
    NavBar,
  },
  data() {
    return {
      active: 0,
      title: [
        { title: "全部订单", value: "1" },
        { title: "待支付", value: "2" },
        { title: "已完成", value: "3" },
        { title: "已取消", value: "4" },
      ],
      list1: [],
    };
  },
  mounted() {
    this.active = 0;
    getMyOrder({
      limit: 10,
      order_status: 0,
      order_type: 2,
      page: 1,
    }).then((res) => {
      console.log(res);
      this.list1 = res.list;
    });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    getTab() {
      if (this.active == 0) {
        getMyOrder({
          limit: 10,
          order_status: 0,
          order_type: 2,
          page: 1,
        }).then((res) => {
          console.log(res);
          this.list1 = res.list;
        });
      } else if (this.active == 1) {
        getMyOrder({
          limit: 10,
          order_status: 1,
          order_type: 2,
          page: 1,
        }).then((res) => {
          console.log(res);
        });
      } else if (this.active == 3) {
        getMyOrder({
          limit: 10,
          order_status: 3,
          order_type: 2,
          page: 1,
        }).then((res) => {
          console.log(res);
        });
      }
    },
  },
  filters: {
    time(dataStr) {
      var time = new Date(dataStr * 1000);
      function timeAdd0(str) {
        if (str < 10) {
          str = "0" + str;
        }
        return str;
      }
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return (
        y +
        "-" +
        timeAdd0(m) +
        "-" +
        timeAdd0(d) +
        " " +
        timeAdd0(h) +
        ":" +
        timeAdd0(mm) +
        ":" +
        timeAdd0(s)
      );
    },
  },
};
</script>

<style scoped>
.textdd {
  padding-bottom: 100px;
}
.all {
  width: 90%;
  height: 120px;
  border: 2px solid hsl(0, 0%, 93%);
  margin: 10px auto;
  border-radius: 10px;
  padding: 10px;
}
.p1 {
  display: flex;
  justify-content: space-between;
  padding: 5px;
  border-bottom: 1px solid #eeeeee;
}
.p2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p2,
.p3,
.p4 {
  padding: 5px;
}
.p3,
.p4 {
  color: #999;
}
</style>